<template>
  <div class="date">
    <span class="period">{{ periodsNumber }}期</span>
    <span class="text" :class="getClass()">{{ drawingStatus.des }}</span>
  </div>
</template>

<script setup lang="ts">
import { GAME_STATUS_CODE } from '@/enum'
type Props = {
  periodsNumber?: number
  drawingStatus: any
}

const props = defineProps<Props>()

const getClass = () => {
  if (GAME_STATUS_CODE.kaipan.code === props.drawingStatus.code) {
    return 'kaipan'
  }
  if (GAME_STATUS_CODE.mi.code === props.drawingStatus.code) {
    return 'kaijiang'
  }
}

</script>

<style lang="less" scoped>
.date {
  margin-bottom: 8px;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;
  text-align: left;

  .period {
    font-family: 'DIN';
    font-weight: 600;
  }

  .text {
    font-size: 11px;
    margin-left: 3px;
    color: #fff;
    background: #ff563f;
    border-radius: 4px;
    padding: 2px 5px;

    &.kaipan {
      background: rgba(198, 32, 240, 1);
    }

    &.kaijiang {
      background: rgba(11, 205, 42, 1);
    }
  }
}
</style>
